<template>
  <div class="personal layout-pd">
    <el-row>
      <!-- 个人信息 -->
      <el-col :xs="24" :sm="8" style="padding: 0 10px">
        <el-card>
          <div class="personal-user">
            <div class="personal-user-avatar" @click="onCropperDialogOpen">

              <el-avatar :size="100"
                         :src="state.personalForm.avatar"
                         title="点击更换头像"
                         style="cursor: pointer"/>

            </div>
            <div class="personal-user-right">
              <el-row>
                <el-col :span="24">
                  <div class="personal-user-name">
                    <strong>{{ state.personalForm.nickname }}</strong>
                  </div>
                </el-col>
                <el-col :span="24">
                  <div class="personal-user-description">
                    <div>
                      <span>{{ state.personalForm.remarks }}</span>
                    </div>
                  </div>
                </el-col>

                <el-col :span="24">
                  <el-divider content-position="left">个人信息</el-divider>
                </el-col>
                <el-col :span="24">
                  <div class="personal-item">
                    <div class="personal-item-label">昵称：</div>
                    <div class="personal-item-value">{{ userStores.userInfos.nickname }}</div>
                  </div>
                </el-col>

                <el-col :span="24">
                  <div class="personal-item">
                    <div class="personal-item-label">身份：</div>
                    <div class="personal-item-value">超级管理</div>
                  </div>
                </el-col>

                <el-col :span="24">
                  <div class="personal-item">
                    <div class="personal-item-label">登录IP：</div>
                    <div class="personal-item-value">192.168.1.1</div>
                  </div>
                </el-col>

                <el-col :span="24">
                  <div class="personal-item">
                    <div class="personal-item-label">登录时间：</div>
                    <div class="personal-item-value">{{ userInfos.login_time }}</div>
                  </div>
                </el-col>

                <el-col :span="24">
                  <div class="personal-item">
                    <div class="personal-item-label">密码：</div>
                    <div class="personal-item-value">
                      <el-button text type="primary" @click="updatePassword">修改密码</el-button>
                    </div>
                  </div>
                </el-col>
                <el-col :span="24">
                  <el-button type="primary" @click="state.showEditPage = !state.showEditPage">
                    <el-icon>
                      <ele-Position/>
                    </el-icon>
                    更新个人信息
                  </el-button>
                </el-col>

                <el-col :span="24">
                  <el-divider content-position="left">个性标签</el-divider>
                </el-col>
                <el-col :span="24">
                  <div class="personal-item-tag">
                    <el-tag
                        v-for="tag in state.personalForm.tags"
                        :key="tag"
                        size="default"
                        type="success"
                        style="{margin-left: 0.25rem;margin-right: 0.25rem;}"
                        :disable-transitions="false"
                    >{{ tag }}
                    </el-tag>
                  </div>
                </el-col>

              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 消息通知 -->
      <el-col :xs="24" :sm="16" class="pl15 personal-info">
        <el-card shadow="hover">
          <template #header>
            <span>消息通知</span>
          </template>
          <div class="personal-info-box">
            <ul class="personal-info-ul">
              <li v-for="(v, k) in state.newsInfoList" :key="k" class="personal-info-li">
                <a :href="v.link" target="_block" class="personal-info-li-title">{{ v.title }}</a>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>


    </el-row>
    <!-- 更新信息 -->
    <el-dialog title="更新"
               destroy-on-close
               v-model="state.showEditPage">
      <el-row>
        <el-col :span="24" style="padding: 0 10px">
          <el-card class="personal-edit">
            <div class="personal-edit-title">基本信息</div>
            <el-form :model="state.personalForm" size="default" label-width="auto" class="mt35 mb35">
              <el-row :gutter="35">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                  <el-form-item label="昵称">
                    <el-input v-model="state.personalForm.nickname" placeholder="请输入昵称" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                  <el-form-item label="签名">
                    <el-input v-model="state.personalForm.remarks" placeholder="请输入签名" clearable></el-input>
                  </el-form-item>
                </el-col>

                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                  <el-form-item label="个性标签">
                    <el-tag
                        v-for="tag in state.personalForm.tags"
                        :key="tag"
                        size="default"
                        type="success"
                        closable
                        style="{margin-left: 0.25rem;margin-right: 0.25rem;}"
                        :disable-transitions="false"
                        @close="removeTag(tag)"
                    >{{ tag }}
                    </el-tag>

                    <el-input
                        v-if="state.editTag"
                        ref="UserTagInputRef"
                        v-model="state.tagValue"
                        class="ml-1 w-20"
                        size="small"
                        @keyup.enter="addTag"
                        @blur="addTag"
                        style="width: 100px"
                    />
                    <el-button v-else size="small" @click="showEditTag">
                      + New Tag
                    </el-button>
                    <!--                  <el-input v-model="state.personalForm.tags" placeholder="请输入签名" clearable></el-input>-->
                  </el-form-item>
                </el-col>

                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                  <el-form-item label="邮箱">
                    <el-input v-model="state.personalForm.email" placeholder="请输入邮箱" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
      <template #footer>
        <el-button type="primary" @click="save">
          更新
        </el-button>
      </template>
    </el-dialog>

    <SeePictures ref="SeePicturesRef" @updateAvatar="updateAvatar"></SeePictures>

    <ResetPassword ref="ResetPasswordRef"></ResetPassword>
  </div>
</template>

<script setup name="personal">
import {computed, defineAsyncComponent, nextTick, onMounted, reactive, ref} from 'vue';
import {formatAxis} from '/@/utils/formatTime';
import {useUserInfo} from "/@/stores/userInfo";
import {useUserApi} from "/@/api/useSystemApi/user";
import {ElMessage} from "element-plus";
import {storeToRefs} from "pinia";
import ResetPassword from "/@/views/system/personal/ResetPassword.vue";

const SeePictures = defineAsyncComponent(() => import("/@/components/seePictures/index.vue"))
const SeePicturesRef = ref();
const UserTagInputRef = ref();
const ResetPasswordRef = ref();
// 用户信息
const userStores = useUserInfo()
const {userInfos} = storeToRefs(userStores);


// 定义变量内容
const state = reactive({
  newsInfoList: [],
  recommendList: [],
  personalForm: {
    username: '',
    nickname: '',
    avatar: '',
    remarks: '',
    email: '',
    tags: '',
  },
  editTag: false,
  tagValue: "",

  showEditPage: false,
  cropperImg: '',
});

const getUserInfo = async () => {
  let {data} = await useUserApi().getUserInfoByToken()
  if (!data.avatar) {
    data.avatar = ""
  }
  state.personalForm = data
}

// 当前时间提示语
const currentTime = computed(() => {
  return formatAxis(new Date());
});

// 打开裁剪弹窗
const onCropperDialogOpen = () => {
  SeePicturesRef.value.openDialog(state.personalForm.avatar);
};


// tags
const showEditTag = () => {
  state.editTag = true
  nextTick(() => {
    UserTagInputRef.value?.input.focus()
  })
}

const removeTag = (tag) => {
  state.personalForm.tags.splice(state.personalForm.tags.indexOf(tag), 1)
}

const addTag = () => {
  if (state.editTag && state.tagValue) {
    if (!state.personalForm.tags) state.personalForm.tags = []
    state.personalForm.tags.push(state.tagValue)
  }
  state.editTag = false
  state.tagValue = ''
}

const save = async () => {
  let {data} = await useUserApi().saveOrUpdate(state.personalForm)
  await userStores.setUserInfos(data)
  await getUserInfo()
  ElMessage.success("更新成功!╰(*°▽°*)╯😍")
  state.showEditPage = !state.showEditPage
}

const updateAvatar = (img) => {
  state.personalForm.avatar = img
  save()
}

const updatePassword = () => {
  ResetPasswordRef.value.openDialog(userInfos.value)
}

onMounted(() => {
  getUserInfo()
})
</script>

<style scoped lang="scss">
@import '../../../theme/mixins/index.scss';

.personal {
  .personal-user {
    //height: 130px;
    //display: flex;
    align-items: center;
    padding: 20px;


    .personal-user-avatar {
      width: 100px;
      height: 100px;
      margin: auto;
      border-radius: 3px;
      margin-bottom: 20px;

      img {
        cursor: pointer;
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }


    .personal-user-right {
      flex: 1;
      padding: 0 15px;

      .personal-user-name {
        text-align: center;
        font-size: 20px;
        margin-bottom: 10px;
      }

      .personal-user-description {
        text-align: center;
      }

      .personal-title {
        font-size: 18px;
        @include text-ellipsis(1);
      }

      .personal-item {
        display: flex;
        align-items: center;
        font-size: 13px;
        height: 30px;
        width: 100%;
        flex-flow: wrap;

        .personal-item-label {
          color: var(--el-text-color-secondary);
          @include text-ellipsis(1);
        }

        .personal-item-value {
          @include text-ellipsis(1);
        }
      }

      .personal-item-tag {
        .personal-item-tag-item {
          margin: 5px;
          float: left;
        }
      }
    }
  }

  .personal-info {

    .personal-info-box {
      height: 130px;
      overflow: hidden;

      .personal-info-ul {
        list-style: none;

        .personal-info-li {
          font-size: 13px;
          padding-bottom: 10px;

          .personal-info-li-title {
            display: inline-block;
            @include text-ellipsis(1);
            color: var(--el-text-color-secondary);
            text-decoration: none;
          }

          & a:hover {
            color: var(--el-color-primary);
            cursor: pointer;
          }
        }
      }
    }
  }

  .personal-recommend-row {
    .personal-recommend-col {
      .personal-recommend {
        position: relative;
        height: 100px;
        border-radius: 3px;
        overflow: hidden;
        cursor: pointer;

        &:hover {
          i {
            right: 0px !important;
            bottom: 0px !important;
            transition: all ease 0.3s;
          }
        }

        i {
          position: absolute;
          right: -10px;
          bottom: -10px;
          font-size: 70px;
          transform: rotate(-30deg);
          transition: all ease 0.3s;
        }

        .personal-recommend-auto {
          padding: 15px;
          position: absolute;
          left: 0;
          top: 5%;
          color: var(--next-color-white);

          .personal-recommend-msg {
            font-size: 12px;
            margin-top: 10px;
          }
        }
      }
    }
  }

  .personal-edit {
    .personal-edit-title {
      position: relative;
      padding-left: 10px;
      color: var(--el-text-color-regular);

      &::after {
        content: '';
        width: 2px;
        height: 10px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        background: var(--el-color-primary);
      }
    }

    .personal-edit-safe-box {
      border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
      padding: 15px 0;

      .personal-edit-safe-item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .personal-edit-safe-item-left {
          flex: 1;
          overflow: hidden;

          .personal-edit-safe-item-left-label {
            color: var(--el-text-color-regular);
            margin-bottom: 5px;
          }

          .personal-edit-safe-item-left-value {
            color: var(--el-text-color-secondary);
            @include text-ellipsis(1);
            margin-right: 15px;
          }
        }
      }

      &:last-of-type {
        padding-bottom: 0;
        border-bottom: none;
      }
    }
  }
}
</style>
